<template>
  <div class="content">
    <div class="store-list">
      <div v-for="item in storeList" :key="item" :class="{'store-item':true,'active':item.id==storeId}" @click="storeId=item.id">
        <div class="store-left">
          <img mode="aspectFit" v-if="item.thumb_url" :src="item.thumb_url" />
        </div>
        <div class="store-center">
          <div class="store-name">
              <div class="name">{{item.name}}</div>
              <div class="grey">{{item.distance}}</div>
          </div>
          <div class="mode">
            <img class="mode-icon" v-if="FileUrl.length>0" :src="FileUrl+'store-icon.png'" />
            <span>到店自提</span>
          </div>
          <div class="mode">
            <span>{{item.province[2]=='市'?item.province:item.province+item.city}}{{item.area}}{{item.address}}</span>
          </div>
        </div>
        <!--<div class="store-right">-->

        <!--</div>-->
      </div>
    </div>
    <div class="store-btn">
      <button @click="closeStore">选好了</button>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        FileUrl: this.$base,
        page: 1,
        limit: 10,
        storeList: [],
        totalPage: 0,
        storeId: '',
        latitude:23,
        longitude: 113,
        order_num: ''
      }
    },
    onLoad(query){
      if (query.lat){
        this.latitude = query.lat;
      }
      if (query.lng){
        this.longitude = query.lng;
      }
      if (query.order_num){
        this.order_num = query.order_num;
      }
    },
    onShow(){
      if (wx.getStorageSync('shop_id')){
        this.storeId = wx.getStorageSync('shop_id');
        this.getShopList();
      }else {
        var _this = this;
        wx.getLocation({
          type: 'wgs84',
          success (res) {
            console.log(res);
            _this.latitude = res.latitude;
            _this.longitude = res.longitude;
            _this.getShopList();
          },
          fail (res){
            _this.getShopList();
          }
        })
      }
    },
    methods:{
      async closeStore(){
        if (this.order_num != ''){
          let res = await this.$request.postData('/order/setShopToOrder',{
            order_num: this.order_num,
            shop_id: this.storeId,
            user_token:wx.getStorageSync('userToken')
          })
          if (res.data.level == 'success'){
            wx.setStorageSync('shop_id',this.storeId);
            wx.navigateBack({
              delta: 1
            })
          }
        }else {
          let pages = getCurrentPages()
          let prevPage = pages[pages.length-2]
          prevPage.setData({
            type: 'back'
          })
          wx.setStorageSync('shop_id',this.storeId);
          wx.navigateBack({
            delta: 1
          })
        }
      },
      //获取门店列表
      async getShopList(){
        let params = {
          page: this.page,
          limit: this.limit
        }
        const res = await this.$request.getData('/other/getShopList',params);
        if (res.data.level == 'success'){
          this.storeList = res.data.data;
          this.totalPage = res.data.page_info.total;
          for (let i=0;i<this.storeList.length; i++){
            this.storeList[i].distance = this.getDistance(this.storeList[i].lat,this.storeList[i].lng);
            if (this.storeList[i].distance>1000) {
              this.storeList[i].distance = (this.storeList[i].distance/1000).toFixed(2) + "km";
            }else {
              this.storeList[i].distance = this.storeList[i].distance.toFixed(2) + "m";
            }
          }
        }
      },
      getDistance(lat,lng){
        lat = lat || 0;
        lng = lng || 0;
        this.latitude = this.latitude || 0;
        this.longitude = this.longitude || 0;
        var rad1 = lat * Math.PI / 180.0;
        var rad2 = this.latitude * Math.PI / 180.0;
        var a = rad1 - rad2;
        var b = lng * Math.PI / 180.0 - this.longitude * Math.PI / 180.0;
        var r = 6378137;
        return r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)))
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/css/mixin";
  .content{
    width: 100vw;
    min-height: 100vh;
  }
  .store-list{
    padding: 30rpx;
    .store-item{
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      margin-bottom: 10rpx;
      background: #ffffff;
      border-radius: 10rpx;
      .store-left{
        width: 100rpx;
        height: 100rpx;
        padding: 20rpx 20rpx 20rpx 20rpx;
        img{
          border-radius: 360rpx;
          overflow: hidden;
          width: 100%;
        }
      }
      .store-center{
        min-height: 150rpx;
        width: 100%;
        .store-name{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;

          .name{
            @include ellipsis(1);
            height: 50rpx;
            line-height: 50rpx;
            width: 70%;
          }
          .grey{
            height: 50rpx;
            line-height: 50rpx;
            width: 30%;
            text-align: center;
          }
        }

        .mode{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          min-height: 50rpx;
          line-height: 50rpx;
          color: #818181;
          span{
            font-size: 12px;
            width: 100%;
          }
          .mode-icon{
            width: 30rpx;
            height: 30rpx;
            margin-right: 10rpx;
          }
        }
      }
      .store-right{
        margin-left: auto;
        height: 100rpx;
        line-height: 50rpx;
        padding-right: 10rpx;
        color: #818181;
        font-size: 24rpx;
      }
    }
  }
  .store-btn{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    button{
      width: 100%;
      height: 100rpx;
      color: #ffffff;
      background: #277bcf;
    }
  }
  .active{
    border: 1rpx solid #2e9acf;
  }
</style>
